<template>
  <div class="tw-top-bg" style="width:1920px;height:1080px;transform-origin: 0 0;" :style="{transform: $route.path === '/index/schoolmonitoring' ? null : 'scale('+r+')', margin: '0 '+w+'px'}" :class="{xschool: $route.path === '/index/schoolmonitoring'}">
    <div class="tw-container jx-textHead" :class="{'tw-container--non-scroll': nonScroll}">
      <tw-header
        label="教育数据全景平台"></tw-header>
      <router-view></router-view>
      <tw-footer
        v-if="$route.path!=='/index/forecase'"
        :maxPage="maxPage"
        :hasScroll="hasScroll"></tw-footer>
    </div>
  </div>
</template>

<script scoped>
import TwHeader from '@/components/TwHeader.vue'
import TwFooter from '@/components/TwFooter.vue'
import TwCard from '@/components/TwCard.vue'
import TwEcharts from '@/components/TwEcharts.vue'

export default{
  created () {
    window.addEventListener('resize', this.handleResize)
    console.log('ddddddddddd', this.$route)
  },
  mounted () {
    let vm = this
    this.$nextTick(() => {
      vm.handleResize()
    })
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.handleResize)
  },
  beforeMount () {
    let windowWidth = window.screen.width
    if (windowWidth <= 1024) {
      this.nonScroll = false
    }
  },
  props: [],
  data () {
    return {
      r: 1,
      w: 0,
      routerPat: true,
      nonScroll: true
    }
  },
  computed: {
    maxPage: function () {
      if (this.$route.path.indexOf('main') > 0) {
        return 2
      }
      if (this.$route.path.indexOf('teachingmonitoring') > 0) {
        return 2
      }
      return 0
    },
    hasScroll: function () {
      // 这里是控制footer右侧是否需要滚动，请根据路由来设置
      return this.$route.path.indexOf('teachingmonitoring') > 0
    }
  },
  methods: {
    handleResize (event) {
      let h = document.documentElement.clientHeight
      let w = document.documentElement.clientWidth
      let hn = h * 1920 / 1080
      if ((1920 / 1080) > (w / h)) {
        this.r = w / 1920
        this.w = 0
      } else {
        this.r = h / 1080
        this.w = parseInt((w - hn) / 2)
      }
    },
    handleScrollVisible () {
      console.log('handleScrollVisible')
    }
  },
  components: {
    TwHeader,
    TwFooter,
    TwCard,
    TwEcharts
  }
}
</script>

<style lang="scss">
.tw-top-bg.xschool {
  width: 100%!important;
  height: 100vh!important;
}
</style>
